<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link href="../css/reimbursementDetalis.css" rel="stylesheet" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/jquery.min.js" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				var carId = localStorage.getItem("carId");
				var token = localStorage.getItem("token");
				var ip = localStorage.getItem("ip");
				$.ajax({
					type: 'post', //类型
					url: ip + 'car/carDet', //请求路径
					contentType: 'application/x-www-form-urlencoded', //默认
					dataType: 'json', //返回数据类型  可以是text：字符串  可以是json：json对象
					data: {
						'carId': carId,
						'token': token,
					}, //数据
					success: function(result) {
						if(result.code == 200) {
							var carNum = result.data.carNum;
							localStorage.setItem("carNum", carNum);
							document.getElementById('carNum').innerText = carNum;
							var carDescribe = result.data.carDescribe;
							document.getElementById('carDescribe').innerText = carDescribe;
							var remark = result.data.remark;
							document.getElementById('remark').innerText = remark;
							var carName = result.data.carName;
							localStorage.setItem("carName", carName);
							document.getElementById('carName').innerText = carName;
							var statusName = result.data.status;
							if(0 == statusName) {
								var statustxt = '可使用';
								document.getElementById('statusName').innerText = statustxt;
							} else {
								var statustxt = '正在使用';
								document.getElementById('statusName').innerText = statustxt;
							}
						} else {
							alert('获取数据异常,请重新登录');
							//window.location.href = 'Login.html';
						}
					},
					error: function(data) { //若果传过来的数据为空
					}
				});
				//加载加油记录
				$.ajax({
					type: 'post', //类型
					url: ip + 'car/oilList', //请求路径
					contentType: 'application/x-www-form-urlencoded', //默认
					dataType: 'json', //返回数据类型  可以是text：字符串  可以是json：json对象
					data: {
						'carId': carId,
						'type': 1,
					}, //数据
					success: function(result) {
						if(result.code == 200) {
							if(result.data != '') {
								var txts = '';
								for(var Key in result.data) {
									var place = result.data[Key].place;
									var createTime = result.data[Key].createTime;
									var money = result.data[Key].money;
									var userName = result.data[Key].userName;
									var text = userName + createTime + "在" + place + "加油" + money + "元";
									txts = txts + '<li class="mui-table-view-cell">';
									txts = txts + '<a class="mui-navigate-right" style="word-break:break-all; width:107%;">' + text + '</a></li>';
								}
								txts = txts + '<li class="mui-table-view-cell"> <a class="mui-navigate-right">查看更多</a></li>';
								$("#comeOn").append(txts);
							}
						} else {
							alert('获取数据异常,请重新登录');
							//window.location.href = 'Login.html';
						}
					},
					error: function(data) { //若果传过来的数据为空
					}
				});
				//加载保养记录
				$.ajax({
					type: 'post', //类型
					url: ip + 'car/oilList', //请求路径
					contentType: 'application/x-www-form-urlencoded', //默认
					dataType: 'json', //返回数据类型  可以是text：字符串  可以是json：json对象
					data: {
						'carId': carId,
						'type': 2,
					}, //数据
					success: function(result) {
						if(result.code == 200) {
							if(result.data != '') {
								for(var Key in result.data) {
									var place = result.data[Key].place;
									var createTime = result.data[Key].createTime;
									var money = result.data[Key].money;
									var userName = result.data[Key].userName;
									var text = userName + createTime + "在" + place + "保养" + money + "元";
									var txts = '<li class="mui-table-view-cell">';
									txts = txts + '<a class="mui-navigate-right">' + text + '</a></li>';
								}
								txts = txts + '<li class="mui-table-view-cell"> <a class="mui-navigate-right">查看更多</a></li>';
								$("#maintain").append(txts);
							}
						} else {
							alert('获取数据异常,请重新登录');
							//window.location.href = 'Login.html';
						}
					},
					error: function(data) { //若果传过来的数据为空
					}
				});
			});

			function getRecordAdd() {
				window.location.href = 'comeOnRecordAdd.html';
			}
		</script>
	</head>

	<body style="background: #d9d9d9;">
		<div style=" background: white; width: 90%; margin-left: 5%;margin-top: 10%; box-shadow:1px 2px 1px 1px #aaa;-webkit-border-radius: 10px;">
			<br />
			<font>车辆名称：</font>
			<font id="carName"></font><br/><br />
			<font>车&nbsp;&nbsp;牌&nbsp;&nbsp;号：</font>
			<font id="carNum"></font><br/><br />
			<font>描&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;述：</font>
			<font id="carDescribe"></font><br /><br />
			<font>备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注：</font>
			<font id="remark"></font><br /><br />
			<div class="imgdiv" style="margin-left: 5%;">
			</div><br />
			<font id="statusName" style="color: #00cc99;">使用状态</font><br /><br /><br />
			<ul class="mui-table-view">
				<li class="mui-table-view-cell mui-collapse">
					<a class="mui-navigate-right" href="#">加油记录</a>
					<div class="mui-collapse-content">
						<ul class="mui-table-view" id="comeOn">
						</ul>
					</div>
				</li>
			</ul>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell mui-collapse">
					<a class="mui-navigate-right" href="#">行驶记录</a>
					<div class="mui-collapse-content">
						<ul class="mui-table-view">
							<li class="mui-table-view-cell">
								<a class="mui-navigate-right">Item 1</a>
							</li>
							<li class="mui-table-view-cell">
								<a class="mui-navigate-right">Item 2</a>
							</li>
							<li class="mui-table-view-cell">
								<a class="mui-navigate-right">Item 2</a>
							</li>
							<li class="mui-table-view-cell">
								<a class="mui-navigate-right">查看更多</a>
							</li>
						</ul>
					</div>
				</li>
			</ul>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell mui-collapse">
					<a class="mui-navigate-right" href="#">保养记录</a>
					<div class="mui-collapse-content">
						<ul class="mui-table-view" id="maintain">
						</ul>
					</div>
				</li>
			</ul>
			<input onclick="getRecordAdd()" type="button" value="添加加油保养" style=" font-weight:bold; font-size: calc(17vw/3.75); -webkit-border-radius: 10px; width: 80%;height: 40px;margin: 5%;margin-top:15%; margin-bottom:15%;margin-left:10%;background: #33ff99;color: white;" />
		</div>
	</body>

</html>